<template>
  <div class="medical-assistant">
    <!-- 修改为新的路径 -->
    <nav-header :isChatting="isChatting" @toggle-sidebar="toggleSidebar" />
    <div class="content">
      <!-- 修改为新的路径 -->
      <assistant-info :currentType="currentType" @select="handleQuestionSelect" v-if="!isChatting" />
      <!-- 修改为新的路径 -->
       <!-- 把聊天记录传给<chat-dialog></chat-dialog> -->
      <chat-dialog :chatHistory="medicalStore.chatHistory" v-else />
    </div>
    <!-- 修改为新的路径 -->
    <footer-bar @send="handleSendMessage" @switch-to-chat="switchToChat" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import NavHeader from '@/views/chat/NavHeader.vue';
// import QuestionExamples from '@/views/chat/chat-components/QuestionExamples.vue';
import AssistantInfo from '@/views/chat/chat-types/AssistantInfo.vue';
import ChatDialog from '@/views/chat/chat-dialog/ChatDialog.vue';
import FooterBar from '@/views/chat/FooterBar.vue';
import { useMedicalStore } from '@/store/medical';

const currentType = ref('assistant');
const isChatting = ref(false);
const medicalStore = useMedicalStore();

const handleSendMessage = (message) => {
  console.log('Send message:', message);
};

const switchToChat = () => {
  isChatting.value = true;
};

const handleQuestionSelect = async (question) => {
  await medicalStore.sendQuestion(question);
  switchToChat();
};

const toggleSidebar = () => {
  // 处理侧边栏切换逻辑
};

// const switchToDefault = () => {
//   isChatting.value = false;
// };
</script>

<style scoped lang="scss">
.medical-assistant{
  height:100vh;
}
.content {
  // background: variable.$text-color-dark;
  background: variables.$text-color-dark;
  min-height:calc(100vh - 160px);
  overflow-y: auto;
  // margin:80px 0;
   // box-sizing: border-box;
   padding: 80px 0 74px 0;
}
</style>
